/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
    Component,
    PropTypes
} from 'react';

import {
  Dimensions,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  Animated,
  Easing,
} from 'react-native';

import PureRenderMixin from 'react-addons-pure-render-mixin';
import Camera from 'react-native-camera';

const {width,height}=Dimensions.get('window');

const propTypes = {
  onBarCodeRead : PropTypes.func,
  finderBorderColer : PropTypes.style
};

class ScanBarCode extends Component {
    constructor(props) {
        super(props);
        this.state = {
            compositeAnim: new Animated.Value(10),
        }
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    }

    componentDidMount() {
        this.startAnimation();
        this.state.compositeAnim.addListener((value)=>{
            if(value.value >= 230){
                this.state.compositeAnim.setValue(10);
                this.startAnimation();
            }
        });
    }

    componentWillUnmount() {
        this.state.compositeAnim.removeAllListeners();
    }

    startAnimation() {
        Animated.sequence([ 
            Animated.timing(this.state.compositeAnim, {
                toValue: 230,
                duration: 3000,
                easing:Easing.linear
            })
        ]).start();
    }

    render() {
        return (
            <View style={styles.container}>
                <Camera
                    style={styles.preview}
                    aspect={Camera.constants.Aspect.fill}
                    captureTarget={Camera.constants.CaptureTarget.cameraRoll}
                    type={Camera.constants.Type.back}
                    flashMode={Camera.constants.FlashMode.auto}
                    barcodeScannerEnabled={true}
                    onBarCodeRead={(data)=>this.props.onBarCodeRead&&this.props.onBarCodeRead(data)}
                />
                <View style={[styles.viewFinder,this.props.finderBorderColer]}>
                    <View style={[styles.finderTopLeft,this.props.finderBorderColer]}></View>
                    <View style={[styles.finderTopRight,this.props.finderBorderColer]}></View>
                    <View style={[styles.finderBottomLeft,this.props.finderBorderColer]}></View>
                    <View style={[styles.finderBottomRight,this.props.finderBorderColer]}></View>
                    <Animated.View style={[styles.finderScan,{top:this.state.compositeAnim}]}></Animated.View>
                </View>
            </View>
        );
    }
}

ScanBarCode.PropTypes = propTypes;
ScanBarCode.defaultProps = {
    onBarCodeRead : undefined,
    finderBorderColer:{borderColor:'#0099CC'}
};

export default ScanBarCode;

const styles = StyleSheet.create({
    container:{
        flex:1
    },
    preview:{
        flex:1,
    },
    viewFinder:{
        width:240,
        height:240,
        padding:5,
        borderWidth:3,
        position:'absolute',
        top:height/2-170,
        left:width/2-120,
    },
    finderTopLeft:{
        width:30,
        height:30,
        position:'absolute',
        top:-3,
        left:-3,
        borderTopWidth:3,
        borderLeftWidth:3,
    },
    finderTopRight:{
        width:30,
        height:30,
        top:-3,
        left:207,
        position:'absolute',
        borderTopWidth:3,
        borderRightWidth:3,
    },
    finderBottomLeft:{
        width:30,
        height:30,
        position:'absolute',
        top:207,
        left:-3,
        borderBottomWidth:3,
        borderLeftWidth:3,
    },
    finderBottomRight:{
        width:30,
        height:30,
        position:'absolute',
        top:207,
        left:207,
        borderBottomWidth:3,
        borderRightWidth:3,
    },
    finderScan:{
        width:225,
        left:5,
        height:2,
        backgroundColor:'red',
        position:'absolute',
    },
});
